<template>
  <div>
    <el-row class="bgf">
      <el-col :span="12" :offset="5">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="上级分类" prop="pid">
            <!-- 下拉菜单，发请求！！！！ -->
          </el-form-item>
          <el-form-item label="分类名称" prop="catename">
            <el-input v-model="ruleForm.catename"></el-input>
          </el-form-item>
          <el-form-item label="分类图片" prop="img">
            <!-- 上传组件 -->
            <!-- action 属性： 上传地址！ 如果写了地址，那么选择图片之后就会自动上传！  -->
            <!-- list-type属性： 上传控件的类型 -->
            <!-- file-list属性： 文件列表  [{name:'',url:""}] -->
            <!-- limit属性：上传最大个数 -->
            <!-- on-change: 图片变了的时候对应的回调函数，在这里可以看图片 -->
            <!-- on-exceed: 图片超出时的回调函数，在这里可以提示错误 -->
            <!-- name属性： 上传的对应字段 -->
            <!-- auto-upload:是否自动上传 -->
            <el-upload
              action="#" 
              list-type="picture-card" 
              :on-preview="handlePictureCardPreview" 
              :file-list="fileList"  
              :limit="1" 
              :on-change="fileChange" 
              :auto-upload="false"
              :on-exceed="limitImg"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-radio v-model="ruleForm.status" :label="1">正常</el-radio>
            <el-radio v-model="ruleForm.status" :label="0">禁用</el-radio>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              v-if="!$route.params.id"
              @click="submitForm('ruleForm')"
              >立即添加</el-button
            >
            <el-button type="success" v-else @click="submitForm('ruleForm')"
              >立即修改</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { cateAdd } from "../../http";
export default {
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      // 显示之前已经添加过的图片，在修改时用到
      fileList: [],
      // 表单中的数据
      ruleForm: {
        pid: 0,
        catename: '空调',
        status: 1,
        img: ''
      },
      // 校验表单的规则
      rules: {
        pid: [
          { required: true, message: "请选择上级分类名称", trigger: "blur" },
        ],
        catename: [
          { required: true, message: "请输入商品分类名称", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    // 判断修改还是新增
    if (this.$route.params.id) {
      // 获取id对应的菜单的数据
      // this.getInfoById(this.$route.params.id);
    }
  },
  methods: {
    // 处理图片预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 当图片变化时的回调
    fileChange(file, fileList) {
      // file.raw 才是原生的文件信息！
      this.ruleForm.img =file.raw;
    },
    // 超出时的错误提示
    limitImg(){
      this.$message.warning("分类图片最多添加1个")
    },
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if(valid) {
          // 校验成功
          // 上传的数据是formdata类型的，先定义一个
          let formdata = new FormData();
          // 遍历对象，将ruleForm中的数据挪到formdata
          for (const key in this.ruleForm) {
            formdata.append(key, this.ruleForm[key]);
          }
          // for循环结束后，formdata里面就有了ruleForm的数据，是通过append方法加进来的
          // 需要遍历formdata，逐一打印，才能显示！！！！！！
          // formdata.forEach((value, key) => {
          //   console.log("key %s: value %s", key, value);
          // })
          let res;
          // 整理数据完毕，准备发请求
          if (this.$route.params.id) {
            // 有id是修改,给表单数据添加上id
            formdata.append('id',this.$route.params.id);
            // 修改请求
            // res = await editCategory(formdata); 
          } else {
            // 没有id，就是添加
            // 提交的是formdata实例对象
            res = await cateAdd(formdata); 
          }
          if (res) {
            this.$router.back();
          }
        }
        })
      },
      // 获取修改分类的信息
      getInfoById() {
        res = {}
        let url = 'http://localhost:3000/' + res.list.img;
        // fileList这个数组就是在修改分类信息是会用到，先发请求获取图片地址，然后拼接完整，最后放到数组中
        this.fileList.push({
          // [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]
          name: 'catename',
          url: url
        })
      }
    }
};
</script>
<style lang="">
</style>